import React from 'react';
import { Cascader } from 'antd';
import useMapData from '@/hooks/useMapData';

// const cascaderData = require('@/utils/map/cascaderData.json');

// 字典数据结构转换
const getOptions = cascaderData => {
    const china = {
        id: 0,
        parentId: 0,
        parentName: '',
        code: 'asian',
        dictKey: 'china',
        dictName: '中国',
        sort: 1,
        isLeaf: false,
        remark: '',
        children: []
    };
    const province = cascaderData.filter(v => v.code === 'province');
    const asian = cascaderData.filter(v => v.code === 'asian');
    china.children = province;
    return [china].concat(asian);
};

const Area = props => {
    const [cascaderData] = useMapData('cascader');
    return (
        <Cascader
            fieldNames={{ label: 'dictName', value: 'dictName' }}
            options={getOptions(cascaderData)}
            changeOnSelect
            getPopupContainer={trigger => trigger.parentNode}
            {...props}
        />
    );
};

export default Area;
